<template>
    <div class="app">
        <div>
            <div class="map">
                <MAP :location="[121.161744, 28.862611]"/>
            </div>
            <div class="content-bottom">
                <div class="left-bottom-header">
                    <div class="left-bottom-imgs"><img src="../../assets/img/house.png" alt=""></div>
                        <p>合计10家康养机构</p>
                </div>
                <div class="left-bottom-title" v-for="(item,index) in title" :key="index">
                    <p>{{item.titel}}</p>
                    <span>{{item.tiem}}</span>
                </div>
            </div>        
        </div>
        <div class="right">
            <Right></Right>
        </div>
    </div>
</template>
<script>
import MAP from '../../components/AMap.vue'
import Right from '../../components/right/index.vue'
export default {
    components:{
        MAP,
        Right
    },
    data () {
        return {
            content,
            title:[
            { titel:'临海大洋阳光康养院', tiem:'拱墅区塘河新村2区12幢2单元301室'},
            { titel:'临海大洋阳光康养院备份', tiem:'拱墅区塘河新村2区12幢2单元301室备份'},
            { titel:'临海大洋阳光康养院备份 2', tiem:'拱墅区塘河新村2区12幢2单元301室备份'},
            ],
        }
    }
}

const content = [
    { title:'临海大洋高中', text:'台州市临海市大洋街道大洋西路147号' },
    { title:'早教班', text:'台州市临海市大洋街道大洋西路147号' },
    { title:'婴幼儿活动中心', text:'台州市临海市大洋街道大洋西路147号' },
    { title:'社区培训', text:'台州市临海市大洋街道大洋西路147号' },
    { title:'社区图书馆', text:'台州市临海市大洋街道大洋西路147号' },
    { title:'社区线下课程中心', text:'台州市临海市大洋街道大洋西路147号' }
]
</script>
<style lang="less" scoped>
.app{
    display: flex;
}
.map{
    width: 1340px;
    height: 479px;
    // background: #D8D8D8;
    margin-right: 24px;
    // background-color: LightGray;
    border-radius: 2px;
    border: 1px solid #EBEBEB;
}
.content-bottom{
    margin-top: 24px;
    width: 1340px;
    height: 347px;
    background: #FFFFFF;
    border-radius: 2px;
            .left-bottom-header{
            height:45px;
            font-size: 20px;
            padding-top: 26px;
            margin-left: 24px;
            // margin-bottom: 16px;
            // color: #333333;
            font-weight: bold;
            display: flex;
            .left-bottom-imgs{
                width: 30px;
                height: 30px;
                margin-right: 10px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            p{
                font-size: 20px;
            }       
        }
        .left-bottom-title{
            margin-left: 24px;
            width: 100%;
            margin-top: 30px;
            margin-bottom: 30px;
            p{  
                font-size: 16px;
                font-weight: bold;
                color: #444;
                margin: 0;padding: 0;
            }
            span{
                font-size: 14px;
                font-weight: 400;
                color: #999999;
            }
        }
}

</style>